<template>
    <div>
        <div class="mainDiv">
            <div class="dataDiv">
                <div class="leftDiv">
                    <textarea v-model="leftData" class="content" placeholder="请输入原始数据"></textarea>
                </div>
                &nbsp;&nbsp;&nbsp;
                <div class="rightDiv">
                    <textarea v-model="resultData" class="content" placeholder="处理后数据"></textarea>
                </div>
            </div>
            <div class="buttonDiv">
                <Button ghost @click="cleanData()">清空</Button>
                &nbsp;&nbsp;&nbsp;
                <Button ghost @click="removeSame()">去重</Button>
                &nbsp;&nbsp;&nbsp;
                <Button ghost @click="searchSame()">查找重复</Button>
                &nbsp;&nbsp;&nbsp;
                <Button ghost @click="removeEmptyLine()">去除空行</Button>
                &nbsp;&nbsp;&nbsp;
                <Button ghost @click="removeLineSpace()">去除前后空格</Button>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'StringTrim',
    components: {},
    data () {
      return {
        leftData: '',
        resultData: ''
      }
    },
    created () {
      console.info('初始化')
    },
    methods: {
      removeSame () {
        console.info('removeSame')
        this.resultData = ''
        let leftArray = this.leftData.split('\n')
        let lodash = require('lodash')
        let tempResultArray = lodash.uniqWith(leftArray, lodash.isEqual)
        for (let i = 0; i < tempResultArray.length; i++) {
          this.resultData += tempResultArray[i] + '\n'
        }
      },
      searchSame () {
        console.info('searchSame')
        let leftArray = this.leftData.split('\n')
        let leftArraySort = leftArray.sort()
        let tempArray = []
        for (let i = 0; i < leftArray.length; i++) {
          if (leftArraySort[i] === leftArraySort[i + 1]) {
            console.info('重复内容为', leftArraySort[i])
            let sameItem = {
              sameContent: leftArraySort[i],
              count: 2
            }
            let existSameItem = tempArray.filter(item => item.sameContent === leftArraySort[i])
            if (existSameItem.length > 0) {
              let count = existSameItem[0].count + 1
              existSameItem[0].count = count
              tempArray = tempArray.filter(item => item.sameContent !== leftArraySort[i])
              tempArray.push(existSameItem[0])
            } else {
              tempArray.push(sameItem)
            }
          }
          console.info('tempArray', tempArray)
        }
        this.resultData = ''
        for (let i = 0; i < tempArray.length; i++) {
          this.resultData += '重复项：' + tempArray[i].sameContent + '，数量：' + tempArray[i].count + '\n'
        }
      },
      removeEmptyLine () {
        console.info('removeEmptyLine')
        this.resultData = ''
        let leftArray = this.leftData.split('\n')
        let tempResultArray = []
        for (let i = 0; i < leftArray.length; i++) {
          if (leftArray[i]) {
            tempResultArray.push(leftArray[i])
          }
        }
        for (let i = 0; i < tempResultArray.length; i++) {
          this.resultData += tempResultArray[i] + '\n'
        }
      },
      removeLineSpace () {
        console.info('removeLineSpace')
        this.resultData = ''
        let leftArray = this.leftData.split('\n')
        let tempResultArray = []
        for (let i = 0; i < leftArray.length; i++) {
          if (leftArray[i]) {
            tempResultArray.push(leftArray[i].trim())
          }
        }
        for (let i = 0; i < tempResultArray.length; i++) {
          this.resultData += tempResultArray[i] + '\n'
        }
      },
      cleanData () {
        console.info('cleanData')
        this.leftData = ''
        this.rightData = ''
        this.resultData = ''
      }
    }
  }
</script>

<style scoped>
    .mainDiv {
        width: 100%;
    }
    .dataDiv {
        display: flex;
        width: 90%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        height: 400px;
        overflow: auto;
    }
    .leftDiv {
        width: 50%;
    }
    .rightDiv {
        width: 50%;
    }
    .content {
        width: 100%;
        height: 390px;
    }
    .buttonDiv {
        text-align: center;
    }
    .resultDiv {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
    }
</style>
